<template>
	<view>
		<image class="img" src="/static/user/top.png"></image>
		<view class="bd">
			<up-grid border @click="click">
				<up-grid-item v-for="(item, index) in baseList"
					:customStyle="{ width: 247 + 'rpx', height: 247 + 'rpx' }" align="center" :key="index">
					<image :src="item.src" style="width: 80rpx;height: 80rpx;"></image>
					<text class="grid-text">{{ item.title }}</text>
				</up-grid-item>
			</up-grid>
		</view>
		<logo></logo>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const baseList = ref([
	{
		name: 'photo',
		title: '课程学习',
		url: '/pages/class/index',
		src:'/static/user/c-1.png'
	},
	{
		name: 'lock',
		title: '福利产品',
		url: '/pages/free/index',
		src:'/static/user/c-2.png'
	},
	{
		name: 'star',
		title: '基本信息',
		url: '/pages/info/index',
		src:'/static/user/c-3.png'
	},
	{
		name: 'photo',
		title: '工资条',
		url: '/pages/money/index',
		src:'/static/user/c-4.png'
	},
	{
		name: 'lock',
		title: '学习记录',
		url: '/pages/record/index',
		src:'/static/user/c-5.png'
	},{}
]);

const click = (index) => {
	uni.navigateTo({ url: baseList.value[index].url })
};  
</script>

<style lang="scss" scoped>
.img {
	width: 100%;
	float: left;
	height: 463rpx;
	background-color: $uni-bg-color-mask ;
}


.bd {
	border: 1px solid #d8d8d8;
	float: left;
}

.grid-text {
	padding-top: 20rpx;
}
</style>